<template>
  <div>AComponent</div>
  <p>{{ store.state.counter.count }}</p>
  <p>{{ store.getters["counter/oddOrEven"] }}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</template>

<script lang="ts">
export default {
  name: "AComponent",
};
</script>

<script lang="ts" setup>
import { useStore } from "../../store";
// store就是vuex的store对象，里面包含vuex所有内容
const store = useStore();

const increment = () => {
  // 触发action函数
  store.dispatch("counter/increment", 1);
};

const decrement = () => {
  // 触发mutation函数
  store.commit("counter/DECREMENT", 1);
};
</script>

<style scoped></style>
